<template>
  <div>
    <q-form class="dialog_card column" ref="editRef">
      <div class="row q-col-gutter-x-md dialog_form q-pa-md">
        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            属性名称：
          </h5>
          <q-input
            :rules="[(val) => (val && val.length > 0) || '请输入属性名称']"
            clearable
            dense
            lazy-rules
            outlined
            type="text"
            v-model="form.attr_name"
          />
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            请选择分类：
          </h5>
          <q-select
            :options="list"
            :rules="[(val) => val !== null || '请选择分类']"
            dense
            emit-value
            map-options
            option-label="symbol_name"
            option-value="cat_id"
            outlined
            v-model="form.attr_type_id"
          >
          </q-select>
        </div>

        <div class="col-12">
          <h5>
            <q-icon color="red" name="star" />
            属性类型：
          </h5>
          <q-select
            :options="typeList"
            :rules="[(val) => val !== null || '请选择类型']"
            dense
            emit-value
            map-options
            option-label="name"
            option-value="id"
            outlined
            v-model="form.attr_type"
          >
          </q-select>
        </div>

        <div class="col-12" v-if="form.attr_type != 3">
          <h5>
            <q-icon color="red" name="star" />
            属性值：
          </h5>

          <div v-for="(iteme, i) in valueList.list" :key="i" style="width: 100%;clear: both;">
            <div style="width: 50%;float: left">
              <q-input
                :rules="[(val) => (val && val.length > 0) || '请输入属性值']"
                clearable
                dense
                lazy-rules
                outlined
                type="text"
                v-model="valueList.list[i]"
              />
            </div>
            <q-btn v-if="i > 0" style="color: #FF0080;background: goldenrod;margin-left:10px" @click="delAttr(i)" label="删除" />
          </div>
          <div style="clear: both;margin-bottom: 22px;">
            <q-btn style="background: #FF0080; color: white;" @click="addAttr" label="添加属性值" />
          </div>
        </div>

        <div class="col-12">
          <h5>是否是规格属性：</h5>
          <q-toggle
            :false-value="0"
            :true-value="1"
            color="bule"
            v-model="form.is_spec"
          />
        </div>

        <div class="col-12">
          <h5>是否参与筛选：</h5>
          <q-toggle
            :false-value="0"
            :true-value="1"
            color="bule"
            v-model="form.is_query"
          />
        </div>
      </div>
    </q-form>
  </div>
</template>

<script lang="ts" setup>
import emitter from '@/components/eventbus';
import { goodsAttributeAdd, goodsAttributeEdit, categoryAll } from '@/api/goods';
import { useQuasar } from 'quasar';

interface Props {
  form: {
    attr_id?: number;
    attr_name?: string;
    attr_type_id?: number;
    ga_sort?: number;
    is_query?: number;
    is_spec?: number;
    attr_value_list?: string;
    attr_type?: number;
    created_at?: string;
  };
}

const props = withDefaults(defineProps<Props>(), {
  form: () => ({}),
});
const editRef = ref();
const $q = useQuasar();
const list: any = ref([]);
const typeList : any = [{id:1, name:'单选'},{id:2,name:'多选'},{id:3,name:'输入'}];
const valueList : any = ref([]);

//接收兄弟组件传递事件
emitter.on('saveData', async () => {
  IsValidate();
});
//表单验证
const IsValidate = () => {
  if (editRef.value) {
    editRef.value.validate().then(async function (validate: any) {
      if (validate) {
        onSubmit();
      } else {
      }
    });
  }
};
//提交数据
const onSubmit = async () => {
  form.value.attr_value_list = valueList.value.list.join(',');
  if (form.value.attr_id) {
    const res: any = await goodsAttributeEdit(form.value);
    info(res);
  } else {
    const res: any = await goodsAttributeAdd(form.value);
    info(res);
  }
};
//信息返回
const info = (res: any) => {
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    emit('backList');
  }
};

const emit = defineEmits(['update:form', 'backList']);

const form: any = computed({
  set(value: any) {
    // emit('update:form', value);
  },
  get() {
    return props.form;
  },
});

valueList.value.list = form.value.attr_value_list.split(',');

const getAll = async () => {
  const res: any = await categoryAll();
  list.value = res.data;
};

getAll();

const addAttr = () => {
  valueList.value.list.push('');
}
const delAttr = (i : number) => {
  valueList.value.list.splice(i,1)
}
</script>
<style lang="scss" scoped></style>
